<html>
<head>
  <title>03表单属性</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="Evernote Windows/307027 (zh-CN, DDL); Windows/6.1.0 (Win32);"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="721"/>
<h1>03表单属性</h1>

<div>
<span><div><span style="color: rgb(28, 51, 135);"><b><span style="font-size: 21px;">HTML 5 新的 Input 类型</span></b></span></div><div><span style="font-size: 16px;">HTML 5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。</span></div><div><span style="font-size: 16px;">新的输入类型：</span></div><ul><li><span style="font-size: 16px;">email  </span> 应该包含 e-mail 地址的输入域。 在提交表单时，会自动验证 email 域的值。</li></ul><div>                       例   E-mail: &lt;input type=&quot;email&quot; name=&quot;user_email&quot; /&gt;</div><div><br/></div><ul><li><span style="font-size: 16px;">url      </span> 在提交表单时，会自动验证 url 域的值。</li></ul><div>                       例    Homepage：&lt;input type=&quot;url&quot; name=&quot;user_url&quot; /&gt;</div><div><br/></div><ul><li><span style="font-size: 16px;">number  </span> 用于应该包含数值的输入域，您还能够设定对所接受的数字的限定</li></ul><div>                        例    Points: &lt;input type=&quot;number&quot; name=&quot;points&quot; min=&quot;1&quot; max=&quot;10&quot; /&gt;</div><div><br/></div><ul><li><span style="font-size: 16px;">range     </span> 应该包含一定范围内数字值的输入域。range 类型显示为滑动条。</li></ul><div>                        例    &lt;input type=&quot;range&quot; name=&quot;point&quot; min=&quot;1&quot; max=&quot;10&quot; /&gt;</div><div><br/></div><ul><li><span style="font-size: 16px;">Date pickers（date,month,week,time,datetime,datetime-local)</span></li></ul><div style="margin-left:40px;">               HTML 5 拥有多个可供选取日期和时间的新输入类型：</div><ol><li style="display:inline;list-style:none;"><ol><li style="display:inline;list-style:none;"><ol><li>date - 选取日、月、年</li><li>month - 选取月、年</li><li>week - 选取周和年</li><li>time - 选取时间（小时和分钟）</li><li>datetime - 选取时间、日、月、年（ UTC 时间）<br/></li><li>datetime-local -选取时间、日、月、年（本地时间）</li></ol></li></ol></li></ol><ul><li><span style="font-size: 16px;">search</span></li><li><span style="font-size: 16px;">color</span></li></ul><div><span style="font-size: 16px;"><br/></span></div><div><span style="font-size: 21px;"><span style="color: rgb(28, 51, 135);"><b>表单元素</b></span></span></div><div><span style="font-size: 16px;">HTML 5 拥有若干涉及表单的元素和属性。</span><span style="font-size: 16px;">本章介绍以下新的表单元素：</span></div><ul><li><span style="font-size: 16px;">datalist     </span> datalist 元素规定输入域的选项列表</li></ul><div>                             例</div><div style="margin-left:120px;">Webpage: &lt;input type=&quot;url&quot; list=&quot;url_list&quot; name=&quot;link&quot; /&gt;</div><div style="margin-left:120px;">&lt;datalist id=&quot;url_list&quot;&gt;</div><div style="margin-left:120px;">&lt;option label=&quot;W3School&quot; value=&quot;http://www.W3School.com.cn&quot; /&gt;</div><div style="margin-left:120px;">&lt;option label=&quot;Google&quot; value=&quot;http://www.google.com&quot; /&gt;</div><div style="margin-left:120px;">&lt;option label=&quot;Microsoft&quot; value=&quot;http://www.microsoft.com&quot; /&gt;</div><div style="margin-left:120px;">&lt;/datalist&gt;</div><ul><li><span style="font-size: 16px;">keygen</span></li></ul><div style="margin-left:120px;">keygen 元素是密钥对生成器（ key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（ private key）存储于客户端，公钥（ public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（ client certificate）。目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。</div><ul><li><span style="font-size: 16px;">output</span></li></ul><div style="margin-left:120px;">output 元素用于不同类型的输出，比如计算或脚本输出：</div><div style="margin-left:120px;">例：&lt;output id=&quot;result&quot; onforminput=&quot;resCalc()&quot;&gt;&lt;/output&gt;</div><div style="margin-left:120px;"><span style="font-size: 16px;"><br/></span></div><div><span style="color: rgb(28, 51, 135);"><b><span style="font-size: 21px;">表单属性</span></b></span></div><div><span style="font-size: 16px;">新的form属性：</span></div><ul><li><span style="font-size: 16px;">autocomplete</span></li><li><span style="font-size: 16px;">novalidate</span></li></ul><div><br/></div><div><span style="font-size: 16px;">新的input属性：</span></div><ul><li><span style="font-size: 16px;">autocomplete</span></li><li><span style="font-size: 16px;">autofocus</span></li><li><span style="font-size: 16px;">form</span></li><li><span style="font-size: 16px;">form overrides(formaction,formenctype,formmethod,formnovalidate,formtarget)</span></li><li><span style="font-size: 16px;">height 和 width</span></li><li><span style="font-size: 16px;">list</span></li><li><span style="font-size: 16px;">min,max 和 step</span></li><li><span style="font-size: 16px;">multiple</span></li><li><span style="font-size: 16px;">pattern(regexp)</span></li><li><span style="font-size: 16px;">placeholder</span></li><li><span style="font-size: 16px;">required</span></li></ul><div><span style="font-size: 16px;"><br/></span></div><div><span style="font-size: 16px;"><br/></span></div><div><span style="font-size: 16px;"><b>autocomplete 属性</b><br/>
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。</span></div><div><span style="font-size: 16px;">注释： autocomplete 适用于 &lt;form&gt; 标签，以及以下类型的 &lt;input&gt; 标签： text, search, url,</span><span style="font-size: 16px;">telephone, email, password, datepickers, range 以及 color。</span></div><div><span style="font-size: 16px;">当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：</span></div><div><span style="font-size: 16px;"><br/></span></div><div><b><span style="font-size: 16px;">autofocus 属性</span></b></div><div>规定在页面加载时，域自动地获得焦点。 注释： autofocus 属性适用于所有 &lt;input&gt; 标签的类型。</div><div>例 ：User name: &lt;input type=&quot;text&quot; name=&quot;user_name&quot; autofocus=&quot;autofocus&quot; /&gt;</div><div><span style="font-size: 16px;"><br/></span></div><div><b><span style="font-size: 16px;">form 属性</span></b></div><div>form 属性规定输入域所属的一个或多个表单。注释： form 属性适用于所有 &lt;input&gt; 标签的类型。</div><div><span style="font-size: 16px;"><br/></span></div><div><b><span style="font-size: 16px;">表单重写属性</span></b></div><div>表单重写属性（ form override attributes）允许您重写 form 元素的某些属性设定。</div><ul><li>formaction - 重写表单的 action 属性</li><li>formenctype - 重写表单的 enctype 属性</li><li>formmethod - 重写表单的 method 属性</li><li>formnovalidate - 重写表单的 novalidate 属性</li><li>formtarget - 重写表单的 target 属性</li></ul><div><span style="font-size: 16px;"><font color="#010101">注释：表单重写属性适用于以下类型的</font> <font color="#010101">&lt;input&gt;</font> <font color="#010101">标签：</font><font color="#010101">submit</font> <font color="#010101">和</font> <font color="#010101">image</font><font color="#010101">。</font></span></div><ul><li><span style="font-size: 16px;">创建不同的提交按钮</span></li></ul><ol><li style="display:inline;list-style:none;"><ol><li>height 和 width 属性：height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。注释：height 和 width 属性只适用于 image 类型的 &lt;input&gt; 标签<span style="font-size: 16px;">。</span></li></ol></li></ol><div style="margin-left:80px;"><span style="font-size: 16px;"><br/></span></div><div><span style="font-size: 16px;"><b>list 属性</b>：</span>list 属性规定输入域的 datalist。datalist 是输入域的选项列表。注释：list 属性适用于    </div><div>                    以下类型的 &lt;input&gt; 标签：text, search, url, telephone, email, datepickers,number, range 以及color。</div><div><span style="font-size: 16px;"><br/></span></div><div><span style="font-size: 16px;"><b>min、max 和 step 属性</b>：</span></div><div style="margin-left:40px;">min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。</div><div style="margin-left:40px;">max 属性规定输入域所允许的最大值。</div><div style="margin-left:40px;">min 属性规定输入域所允许的最小值。</div><div>          step 属性为输入域规定合法的数字间隔（如果 step=&quot;3&quot;，则合法的数是 -3,0,3,6 等）。</div><div>          注释：min、max 和 step 属性适用于以下类型的 &lt;input&gt; 标签：date pickers、number 以及 range。</div><div><br/></div><div><span style="font-size: 16px;"><b>multiple 属性</b>：</span>multiple 属性规定输入域中可选择多个值。</div><div>           注释：multiple 属性适用于以下类型的 &lt;input&gt; 标签：email 和 file。</div><div><span style="font-size: 16px;"><br/></span></div><div><span style="font-size: 16px;"><b>novalidate 属性</b>：</span>novalidate 属性规定在提交表单时不应该验证 form 或 input 域。</div><div>           注释：novalidate 属性适用于 &lt;form&gt; 以及以下类型的 &lt;input&gt; 标签：text, search, url, telephone,email, password, date pickers, range 以及 color.</div><div><span style="font-size: 16px;"><br/></span></div><div><span style="font-size: 16px;"><b>pattern 属性</b>：</span>pattern 属性规定用于验证 input 域的模式（pattern）。</div><div style="margin-left:40px;">模式（pattern） 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。</div><div style="margin-left:40px;">注释：pattern 属性适用于以下类型的 &lt;input&gt; 标签：text, search, url, telephone, email 以及password。</div><div style="margin-left:40px;"><span style="font-size: 16px;"><br/></span></div><div><span style="font-size: 16px;"><b>placeholder 属性</b>：</span>placeholder 属性提供一种提示（hint），描述输入域所期待的值。</div><div>           注释：placeholder 属性适用于以下类型的 &lt;input&gt; 标签：text, search, url, telephone, email 以及password。</div><div><span style="font-size: 16px;"><br/></span></div><div><span style="font-size: 16px;"><b>required 属性</b>：</span>required 属性规定必须在提交之前填写输入域（不能为空）。</div><div>           注释：required 属性适用于以下类型的 &lt;input&gt; 标签：text, search, url, telephone, email, password,date pickers, number, checkbox, radio 以及 file。</div><div><span style="font-size: 16px;"><br/></span></div></span>
</div></body></html> 